<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>奖品兑换记录</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  <link rel="stylesheet" href="css/awardRecord.css" />
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="js/adapter.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
  <div class="content">
    <div class="logo">
      <img src="img/logo.png" />
    </div>
    <div class="theme">
      <img src="img/theme.png" />
    </div>
    <div class="subTop">
      <div class="picture">
        <img src="img/title2.png" />
      </div>
    
    </div>
    <div class="back">
      <div class="backBtn">
        <a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
      </div>

    </div>
    <div class="middlePath">
      <div class="title">
        <img src="img/awardRecord.png" />
      </div>


      <div class="tableContent">
        <div class="innerTab">
          <table style="border-collapse:collapse">
            <thead>
              <tr>
                <td style="width: 1.4rem;">奖品名称</td>
                <td style="width: 0.8;">个数</td>
                <td style="width: 1.4rem;">消耗荷花数</td>
                <td style="width: 1.4rem;">兑换时间</td>
                
              </tr>
            </thead>
            <tbody>
              <tr v-for="honorVal in honorVals" :key="honorVal.id">
                <td>{{honorVal.awardName}}</td>
                <td>{{honorVal.number}}</td>
                <td>{{honorVal.cutNumber}}</td>
                <td>{{honorVal.data}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="page">
        <span>页码</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        

      </div>

    </div>
    <div class="bottom-logo">
      <img src="img/bottom_logo2.png" />
    </div>
  </div>

  <script>

    var app = new Vue({
      el: '.content',
      data: {
        honorVals: [
          { id: 1,awardName:"奖品A", source: "**扫码", data: "2019-12-30 11:11:11", number: 1,cutNumber:50, honorVal: 2000, area: "龙湖" },
          { id: 2,awardName:"奖品B", source: "**扫码", data: " ", number: 1,cutNumber:280, honorVal: 2000, area: "天马" },
          { id: 3,awardName:"奖品C", source: "**PK", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },
          { id: 4,awardName:"奖品A", source: "**PK", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },
          { id: 5,awardName:"奖品B", source: "**拉新", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },
          { id: 6,awardName:"奖品A", source: "**拉新", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },
          { id: 7,awardName:"奖品A", source: "**扫码", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },
          { id: 8,awardName:"奖品A", source: "**PK", data: " ", number: 1, cutNumber:28,honorVal: 2000, area: "龙湖" },
          { id: 9,awardName:"奖品A", source: "**扫码", data: " ", number: 1,cutNumber:28, honorVal: 2000, area: "龙湖" },


        ]
      }
    })
  </script>
<script type="text/javascript">
	$(".backBtn").click(function(){
		location.href="personalCenter.html"
	})
</script>
</body>

</html>